<template>
  <van-overlay :show="show" :z-index="60" :lock-scroll="false">
    <div class="prize-box" v-if="isWin">
      <p>恭喜您获得</p>
      <img :src="prizeImg" alt="" />
    </div>
    <div class="prize-box" v-else>
      <p>很遗憾，您未中奖</p>
      <img :src="notAwardImg" alt="" />
    </div>
    <img
      class="close"
      src="../../assets/btn_close.png"
      @click="show = false"
      alt=""
    />
  </van-overlay>
</template>

<script>
import { Overlay } from 'vant';
import { ref } from '@vue/reactivity';
import { nextTick, onMounted } from '@vue/runtime-core';
export default {
  props: {
    notAwardImg: {
      type: String,
      default: require('@/assets/not_award.png').default
    },
    prizes: { type: Object }
  },
  setup() {
    let show = ref(false);
    let isWin = ref(false);
    let prizeImg = ref('');
    const showBox = (prize) => {
      if (prize.da_id && prize.da_id !== 'none') {
        isWin.value = true;
        prizeImg.value = prize.da_icon;
      }
      console.log(prize);
      show.value = true;
    };
    onMounted(() => {
      nextTick();
    });
    return {
      show,
      isWin,
      prizeImg,
      showBox
    };
  },
  components: {
    [Overlay.name]: Overlay
  }
};
</script>

<style scoped lang="scss">
.van-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.prize-box {
  width: 200px;
  height: 200px;
  background: #fff;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  img {
    width: 50px;
  }
}
.close {
  width: 50px;
  margin-top: 30px;
}
</style>
